<template>
    <div ref="chartRef" style="width: 210px; height: 150px"></div>
</template>

<script setup>
import { ref, onMounted, watchEffect, nextTick, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const props = defineProps({
    scale: { type: Number, default: 1 },
    xCoordinate: {
        type: Array,
        default: () => [26.5, 125.5, 235.5, 329.5, 430.5, 531.5],
    },
    yCoordinate: {
        type: Array,
        default: () => [1172.5, 1174.5, 1176.5, 1178.5, 1180.5, 1182.5],
    },
});

const chartRef = ref(null);
let chartInstance = null;

const xData = ["0", "100", "200", "300", "400", "500", "600", "700", "800"];
const yData = [
    "1166",
    "1168",
    "1170",
    "1172",
    "1174",
    "1176",
    "1178",
    "1180",
    "1182",
    "1184",
];

const initChart = (xCoordinate, yCoordinate) => {
    if (!chartRef.value || !xCoordinate.length || !yCoordinate.length) return;

    if (chartInstance) {
        chartInstance.dispose();
    }

    chartInstance = echarts.init(chartRef.value, null, {
        devicePixelRatio: window.devicePixelRatio * props.scale || 1,
    });

    const mainPoints = xCoordinate.map((x, i) => [x, yCoordinate[i]]);
    const normalLineData = mainPoints.slice(0, -1);
    const lastLineData = mainPoints.slice(-2);
    const lastPoint = mainPoints[mainPoints.length - 1];

    const option = {
        tooltip: {
            trigger: "item",
            formatter: (params) => {
                const [x, y] = params.data;
                return `X: ${x}<br/>Y: ${y}`;
            },
        },
        xAxis: {
            type: "value",
            min: 0,
            max: 800,
            splitLine: { show: false },
            axisLabel: {
                fontSize: 8,
                formatter: (val) =>
                    xData.includes(String(Math.round(val)))
                        ? String(Math.round(val))
                        : "",
            },
            axisLine: {
                lineStyle: {
                    color: "#fff", 
                },
            },
            axisTick: {
                lineStyle: {
                    color: "#fff", 
                },
            },
        },
        yAxis: {
            type: "value",
            min: 1166,
            max: 1184,
            splitLine: { show: false },
            axisLabel: {
                fontSize: 8,
                formatter: (val) =>
                    yData.includes(String(Math.round(val)))
                        ? String(Math.round(val))
                        : "",
            },
            axisLine: {
                lineStyle: {
                    color: "#fff", // ✅ 坐标轴线颜色
                },
            },
            axisTick: {
                lineStyle: {
                    color: "#fff", // ✅ 坐标轴刻度颜色
                },
            },
        },
        grid: { left: 60, right: 20, bottom: 40, top: 40 },
        series: [
            {
                type: "line",
                data: normalLineData,
                lineStyle: { color: "#fff", width: 1 },
                symbol: "circle",
                symbolSize: 3,
                itemStyle: { color: "#fff" },
            },
            {
                type: "line",
                data: lastLineData,
                lineStyle: { color: "red", width: 2 },
                symbol: "none",
            },
            {
                type: "effectScatter",
                data: [lastPoint],
                symbolSize: 3,
                rippleEffect: { scale: 2.5, brushType: "stroke" },
                itemStyle: { color: "red" },
                zlevel: 2,
            },
        ],
    };

    chartInstance.setOption(option, { notMerge: true });
};

const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

onMounted(() => {
    initChart(props.xCoordinate, props.yCoordinate);
    window.addEventListener("resize", resizeChart);

    // 延迟初始化图表直到 props 数据准备好
    watchEffect(() => {
        if (props.xCoordinate.length && props.yCoordinate.length) {
            nextTick(() => {
                initChart(props.xCoordinate, props.yCoordinate);
            });
        }
    });
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart);
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
</script>